{% extends 'base.html' %}
{% load static %}

{% block title %}{{ target_user.username }}的个人空间{% endblock %}

{% block content %}
<style>
    .personal-space {
        max-width: 1200px;
        margin: 20px auto 0;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        min-height: calc(100vh - 100px);
        border-radius: 15px 15px 0 0;
    }
    
    .space-header {
        background: rgba(255, 255, 255, 0.95);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        gap: 30px;
    }
    
    .user-avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 5px solid #667eea;
        object-fit: cover;
    }
    
    .user-info h1 {
        margin: 0 0 10px 0;
        color: #333;
        font-size: 2.5em;
    }
    
    .user-level {
        background: linear-gradient(45deg, #667eea, #764ba2);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-weight: bold;
        display: inline-block;
        margin-bottom: 15px;
    }
    
    .exp-bar {
        width: 200px;
        height: 20px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid rgba(255, 215, 0, 0.3);
        margin-bottom: 10px;
        position: relative;
    }
    
    .exp-fill {
        height: 100%;
        background: linear-gradient(90deg, #00ff88, #00cc6a);
        border-radius: 10px;
        transition: width 0.3s ease;
        box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
    }
    
    .exp-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #00ff88;
        font-weight: bold;
        font-size: 12px;
        text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
    }
    
    .space-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 30px;
    }
    
    .main-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    
    .card {
        background: #fafafa;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-5px);
    }
    
    .card h3 {
        margin: 0 0 20px 0;
        color: #ddd;
        border-bottom: 2px solid #667eea;
        padding-bottom: 10px;
    }
    
    .checkin-section {
        text-align: center;
    }
    
    .checkin-btn {
        background: linear-gradient(45deg, #4CAF50, #45a049);
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 25px;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 15px;
    }
    
    .checkin-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(76, 175, 80, 0.4);
    }
    
    .checkin-btn:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }
    
    .checkin-info {
        font-size: 14px;
        color: #aaa;
    }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
    }
    
    .stat-item {
        text-align: center;
        padding: 15px;
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        border-radius: 10px;
    }
    
    .stat-value {
        font-size: 24px;
        font-weight: bold;
        color: #667eea;
        display: block;
    }
    
    .stat-label {
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        font-weight: bold;
    }
    
    .achievement-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
        gap: 15px;
    }
    
    .achievement-item {
        text-align: center;
        padding: 15px 10px;
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
        border-radius: 10px;
        transition: transform 0.3s ease;
    }
    
    .achievement-item:hover {
        transform: scale(1.05);
    }
    
    .achievement-icon {
        font-size: 24px;
        margin-bottom: 8px;
        display: block;
    }
    
    .achievement-name {
        font-size: 12px;
        font-weight: bold;
        color: #ddd;
    }
    
    .battle-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #eee;
    }
    
    .battle-item:last-child {
        border-bottom: none;
    }
    
    .battle-result {
        padding: 4px 12px;
        border-radius: 15px;
        font-size: 12px;
        font-weight: bold;
    }
    
    .result-win {
        background: #4CAF50;
        color: white;
    }
    
    .result-loss {
        background: #f44336;
        color: white;
    }
    
    .result-draw {
        background: #ff9800;
        color: white;
    }
    
    .message-form {
        margin-top: 20px;
    }
    
    .message-input {
        width: 100%;
        padding: 12px;
        border: 2px solid #ddd;
        border-radius: 8px;
        resize: vertical;
        min-height: 80px;
        margin-bottom: 10px;
    }
    
    .send-btn {
        background: #667eea;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 5px;
        cursor: pointer;
        font-weight: bold;
    }
    
    .send-btn:hover {
        background: #5a6fd8;
    }
    
    .message-item {
        padding: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        margin-bottom: 10px;
        border-left: 4px solid #667eea;
    }
    
    .message-sender {
        font-weight: bold;
        color: #667eea;
        font-size: 14px;
    }
    
    .message-content {
        margin: 8px 0;
        color: #ddd;
    }
    
    .message-time {
        font-size: 12px;
        color: #999;
    }
    
    .no-data {
        text-align: center;
        color: #999;
        font-style: italic;
        padding: 20px;
    }
    
    @media (max-width: 768px) {
        .space-grid {
            grid-template-columns: 1fr;
        }
        
        .space-header {
            flex-direction: column;
            text-align: center;
        }
        
        .stats-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
</style>

<div class="personal-space">
    <!-- 用户头部信息 -->
    <div class="space-header">
        <img src="{% if profile.avatar %}{{ profile.avatar.url }}{% else %}{% static 'images/default_avatar.svg' %}{% endif %}" 
             alt="{{ target_user.username }}的头像" class="user-avatar">
        <div class="user-info">
            <h1>{{ target_user.username }}</h1>
            <div class="user-level">等级 {{ profile.level|default:1 }}</div>
            <div class="exp-bar">
                <div class="exp-fill" style="width: {{ profile.exp_percentage|default:0 }}%"></div>
                <div class="exp-text">{{ profile.exp|default:0 }} / {{ profile.next_level_exp|default:332 }} EXP</div>
            </div>
            {% if profile.bio %}
                <p style="color: #aaa; margin: 10px 0 0 0;">{{ profile.bio }}</p>
            {% endif %}
        </div>
    </div>
    
    <div class="space-grid">
        <!-- 主要内容区域 -->
        <div class="main-content">
            <!-- 统计面板 -->
            <div class="card">
                <h3>📊 战斗统计</h3>
                <div class="stats-grid">
                    <div class="stat-item">
                        <span class="stat-value">{{ battle_stats.total_battles|default:0 }}</span>
                        <div class="stat-label">总战斗</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">{{ battle_stats.wins|default:0 }}</span>
                        <div class="stat-label">胜利</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">{{ battle_stats.losses|default:0 }}</span>
                        <div class="stat-label">失败</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">{% if battle_stats.total_battles > 0 %}{{ battle_stats.get_win_rate|floatformat:0 }}%{% else %}0%{% endif %}</span>
                        <div class="stat-label">胜率</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">{{ battle_stats.rating|default:0 }}</span>
                        <div class="stat-label">评分</div>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value">{{ profile.total_exp }}</span>
                        <div class="stat-label">总经验</div>
                    </div>
                </div>
            </div>
            
            <!-- 最近战斗 -->
            <div class="card">
                <h3>⚔️ 最近战斗</h3>
                {% if recent_battles %}
                    {% for battle in recent_battles %}
                        <div class="battle-item">
                            <div>
                                <strong>vs {% if battle.player1 == target_user %}{{ battle.player2.username }}{% else %}{{ battle.player1.username }}{% endif %}</strong>
                                <div style="font-size: 12px; color: #aaa;">{{ battle.created_at|date:"m-d H:i" }}</div>
                            </div>
                            <div>
                                {% if battle.status == 'finished' %}
                                    {% if battle.player1 == battle.player2 %}
                                        <span class="battle-result" style="background: #9C27B0; color: white;">自我对战</span>
                                    {% elif battle.result == 'draw' %}
                                        <span class="battle-result result-draw">平局</span>
                                    {% elif battle.result == 'player1_win' and battle.player1 == target_user %}
                                        <span class="battle-result result-win">胜利</span>
                                    {% elif battle.result == 'player2_win' and battle.player2 == target_user %}
                                        <span class="battle-result result-win">胜利</span>
                                    {% else %}
                                        <span class="battle-result result-loss">失败</span>
                                    {% endif %}
                                {% else %}
                                    <span class="battle-result" style="background: #2196F3; color: white;">{{ battle.get_status_display }}</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="no-data">暂无战斗记录</div>
                {% endif %}
            </div>
            
            <!-- 成就展示 -->
            <div class="card">
                <h3>🏆 最近成就</h3>
                {% if user_achievements %}
                    <div class="achievement-grid">
                        {% for user_achievement in user_achievements %}
                            <div class="achievement-item" title="{{ user_achievement.achievement.description }}">
                                <span class="achievement-icon">{{ user_achievement.achievement.icon|default:"🏆" }}</span>
                                <div class="achievement-name">{{ user_achievement.achievement.name }}</div>
                            </div>
                        {% endfor %}
                    </div>
                    <div style="text-align: center; margin-top: 15px;">
                        <a href="{% url 'accounts:achievements' %}" class="send-btn">查看全部成就</a>
                    </div>
                {% else %}
                    <div class="no-data">暂无成就</div>
                {% endif %}
            </div>
        </div>
        
        <!-- 侧边栏 -->
        <div class="sidebar">
            <!-- 签到系统 -->
            {% if is_own_space %}
                <div class="card checkin-section">
                    <h3>📅 每日签到</h3>
                    <button id="checkinBtn" class="checkin-btn" 
                            {% if checkin_status.checked_in_today %}disabled{% endif %}>
                        {% if checkin_status.checked_in_today %}
                            今日已签到
                        {% else %}
                            立即签到
                        {% endif %}
                    </button>
                    <div class="checkin-info">
                        <div>连续签到: {{ checkin_status.consecutive_days }} 天</div>
                        <div>下次奖励: {{ checkin_status.next_reward }} EXP</div>
                    </div>
                </div>
            {% endif %}
            
            <!-- 留言板 -->
            {% if is_own_space %}
                <div class="card">
                    <h3>💬 最近留言</h3>
                    {% if messages_received %}
                        {% for message in messages_received %}
                            <div class="message-item">
                                <div class="message-sender">{{ message.from_user.username }}</div>
                                <div class="message-content">{{ message.content }}</div>
                                <div class="message-time">{{ message.created_at|date:"m-d H:i" }}</div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="no-data">暂无留言</div>
                    {% endif %}
                </div>
            {% else %}
                <div class="card">
                    <h3>💬 给TA留言</h3>
                    <form method="post" action="{% url 'accounts:send_message' target_user.id %}" class="message-form">
                        {% csrf_token %}
                        <textarea name="content" class="message-input" placeholder="写下你想说的话..."></textarea>
                        <button type="submit" class="send-btn">发送留言</button>
                    </form>
                </div>
            {% endif %}
            
            <!-- 快捷操作 -->
            <div class="card">
                <h3>🔧 快捷操作</h3>
                {% if is_own_space %}
                    <a href="{% url 'accounts:edit_profile' %}" class="send-btn" style="display: block; text-align: center; margin-bottom: 10px; text-decoration: none;">编辑资料</a>
                    <a href="{% url 'accounts:change_password' %}" class="send-btn" style="display: block; text-align: center; margin-bottom: 10px; text-decoration: none;">修改密码</a>
                    <a href="{% url 'accounts:achievements' %}" class="send-btn" style="display: block; text-align: center; text-decoration: none;">查看成就</a>
                {% else %}
                    <a href="{% url 'battles:challenge' target_user.id %}" class="send-btn" style="display: block; text-align: center; margin-bottom: 10px; text-decoration: none;">发起挑战</a>
                    <a href="{% url 'accounts:personal_space' %}" class="send-btn" style="display: block; text-align: center; text-decoration: none;">返回我的空间</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<script>
// 签到功能
document.addEventListener('DOMContentLoaded', function() {
    const checkinBtn = document.getElementById('checkinBtn');
    
    if (checkinBtn && !checkinBtn.disabled) {
        checkinBtn.addEventListener('click', function() {
            fetch('{% url "accounts:api_checkin" %}', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json',
                },
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert(`签到成功！获得 ${data.exp_reward} 经验值\n连续签到 ${data.consecutive_days} 天`);
                    location.reload();
                } else {
                    alert(data.message);
                }
            })
            .catch(error => {
                console.error('签到失败:', error);
                alert('签到失败，请稍后重试');
            });
        });
    }
});
</script>
{% endblock %}